import React from 'react'
// ===================================================================== Temp
import SubmitForm from '#cpt/temp/SubmitForm'
// ===================================================================== global declare
const { $Lazy, $http } = window
// ===================================================================== Lazy
const Modal 	= $Lazy.state(()=>import('@antd/modal'))
const Button 	= $Lazy.state(()=>import('@antd/button'))
const Image 	= $Lazy.load(()=>import('@antd/image'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		// 提交表单列表
		formData : [
			{ label: '关联条码', name: 'spec_code', full:true, required:true }
		]
	}
	
	open = () => {
		this.modal.open({ formRef: this.formRef })
		this.fetch()
	}
	
	fetch = param => {
		$http.submit(this,'app-upload-pic/nextedit', { param, isPull:true }).then(({pic_path, id, uuid})=>{
			this.id = id
			this.submit = { uuid }
			this.setState({ imgUrl: pic_path })
		})
	}
	
	render(){
		return (
			<Modal
				title	= '条码关联'
				width 	= '60%'
				height 	= '60%'
				okText	= '保存'
				onRef	= { ref => this.modal = ref }
				loading = { this.state.submitLoading }
				btnSuffix = { <Button label='下一个' ghost size='middle' style={{marginLeft:25}} onClick={()=>this.fetch({id:this.id})} /> }
				isFullScroll
			>
				<div className='abs_full fv p15'>
					<div>
						{ SubmitForm.call(this, { api:'app-upload-pic/bindcode', labelWidth:'s6', modal:false, 
							onOk:()=> {
								this.fetch({id:this.id})
								this.formRef.reset()
							}
						}) }
					</div>
					<Image className='ex ml20' src={this.state.imgUrl} />
				</div>
			</Modal>
		)
	}
}

export default Index